import React, { Component } from 'react';
import { Input, Button, List } from 'antd';
import store from './storejs';

class Test extends Component{
	constructor(props){
		super(props);
		this.hanleChange = this.hanleChange.bind(this);
		this.hanleInputChange = this.hanleInputChange.bind(this);
		

		this.state = store.getState();
		store.subscribe(this.hanleInputChange)
	}
	//当父组件的render函数被运行时，子组件的render也会被重新的运行
	render() {
		return (
			<div style={{marginTop: '10px', marginLeft: '10px'}}>
				<div>
					<Input 
						value={this.state.inputValue}
						placeholder="todo info" 
						style={{width: '300px'}}
						onChange={this.hanleChange}
						/>
					<Button onClick = {this.hanleInput} type="primary">提交</Button>
				</div>
				<List
					bordered
					dataSource={this.state.list}
					renderItem={(item, index) => (<List.Item onClick={this.hanleDelete.bind(this, index)}>{item}</List.Item>)}
				/>
			</div>
		)
	}
	hanleChange(e) {
		const action = {
			type: 'input_change',
			value: e.target.value
		}
		store.dispatch(action)
	}

	hanleInputChange() {
		this.setState(store.getState());
	}

	hanleInput() {
		const action = {
			type: 'input_add'
		}
		store.dispatch(action)
	}

	hanleDelete(index) {
		const action = {
			type: 'item_delete',
			index
		}
	store.dispatch(action)
	}
}

export default Test;